تصمیم الواجهات باستخدام برنامج ۲٥م‏ ام J0۷‏ 


لفهم البنية الخاصة بتطوير التطبيقات بو اسطة #۲م0ام6۷لل 

هناك عاملان 

العامل الأول هو ال ع٥‏ 2مS ۷0۲K‏ ويمكن تخيله كمجلد كبير يحتوي المشاريع 

العامل الثاني هو ال ءأععزه۴ وهو عبارة عن حاوية للتطبيقات ويمكن أن يكون هناك أكثر من تطبيق في نفس 
المشروع كما انه يمكن أن يكون هناك أكثر من مشروع في مساحة العمل الواحدة مcمWorkspa‏ 


إنشاء مساحة عمل ومشرaع Workspace & Project‏ 
٠ه‏ عند تشغيل برنامج ١۲٥مه٠ام‏ ۷٥0ل‏ ستظهر لك الشاشة التالية قم بالضغط بزر الفارة الأيمن على 
New رتèخlg Applicaions‏ 


ğ Oracle JDeveloper 10g ا×اھاے‎ 
File Edit Search view Project Run Debug Yersioning Tools Window Help 


OEMNO A XBOEOE RRSRNE ESM #D BH E BE Bu wm 


Ê Applications - Navigator ê component Palette HX 
TE F9 ® 
Ê Applicatinne 
New Application Workspace... 
i flew 
Make Applications Ctrl+shift+F9 


| Bappications [GE connections 


f Database Diagramz - Thumbnail # X 


Palette Inactive 


Thumbnail Inactive 


lë] Structure || f IThumbnail 


Applications | mL Modeling 


Bsr H ã 7 * €) JSsl cuss... | [fo Orade Develo... dJ orade SQL Plus | Ry services | Î so lı deveoer...| IY KENE DO, 12:45 Am 


ستظهر لك هذه الشاشة قم بالاختیار کما هو موضح بالرسم .. تحت 6٥٣62|‏ اختر ac6sےمWorks‏ ومن ثم 


Workspace 


الآن علينا إنشاء تطبيق جافا 


ğo New Gallery 


All Technologies | 


Y Application Workspace 
a" orkspace 


E: Workspace from EAR File 


`..“Database Tier 


اضغط بزر الفأرة الأيمن على كلمة واهأاهاں] واختر NeW‏ 
ثم في قسم res‏ و0 ەCat‏ انتقل إJl Swing/AWT رتëخls Client Tier‏ 


Java Application رتëخ|‎ [tems ومن الجهة المقابلة‎ 


يعرف مبرمجي الجافا ما المقصود ب و4١أSW‏ و ۸W‏ و سأتحدث عنها في حينها 


بعد الاختیار قم بالضغط على O©K۸‏ 


ECT 
Filter By: |aلا‎ Technologies 3 


Categories: Items: 

E1--General 2| | a Applet 
Workspaces l@& Applet HTML Page 
Ant : E Dialog 
Connections E Frame 


Deployment Descriptors 
Deployment Profiles 
Diagrams 
Projects 
Simple Files 
web Services 
RAL 

Business Tier 

Business Components 


îm Java Application 
[&) Java Web Start (JNLP) Files 
J Panel 


CORBA Files 
Enterprise JavaB' EJB 
E اا اي ا‎ Description: 
=1--Client Tier Opens the Create Java Application dialog, which lets you add a skeleton application, java 


File and optional frame. java file to your project, Use the Code Editor to develop ¥our 
application class. 


JavaBeans 


Swing A WT 

Swing/3Client for ADF To enable this option, you must select a project or a file within a project in the Application 
=1-Database Tier Navigator. 

Database Files 

Database Obiects ml 


e | e | 


ستظهر لك النافذة الخاصة ب إنشاء برنامج جافا كالتالي قم بتسمية التطبيق وليكن وم ]ا مثلا يجب أن تكون النافذة 


کالتالي 


ولاحظ انه يجب عليك اختیار اسما ذات معنى وفي نفس الوقت تخضع لشروط التسمية في ج ۷هل فهي في الأخير 
أسماء ملفات و sهءءه|‏ فلا تبداً برقم أو بحروف غريبة مثل العربية وكذلك لا تستخدم المسافات . 


Create Java Application x 


Enter the details of your new class. 


Name: [Login| 
Package: mypackage1 > Browse... | 
Extends: [iava.lang. object آ-‎ Browse... | 


r Optional Attributes 
IV Add Default Frame 
f New Empty Frame 
f” Existing Frame: 


1 BfOWSE,,, | 


[¥ Center Frame on Screen 


Help | 


ce _| 


بعد ذلك اضغط 0۸ 
سيأتي بعدها تباعا شاشة إنشاء ۳"٠‏ ه۴ ( إطار ) وهو يعني شاشة أو نافذة فالتطبيق يحتوي نافذة أو اكثر 
قم بتسمية النافذة W0.‏ ۸و0[ وقم بعمل عنوان لهذه النافذة ولو بالعربية كالمثال التالي : 


Create Frame 


Login Window 
mypackage1 أ‎ 
javax. swing. JFrame v 


واضغط بعدها )0 
ستلاحظ في نافذة 0۲ا2 N۵ Vig‏ ۸٥ااھ‌اامم۸‏ وجود ملفین ذات امتداد جافا 


8 Applications - Navigator 


i. kutarials 


2-1 Application Sources 
-@ Miscellaneous Packages 
“Ês Legin.java 


TB aeplcatons 


احدهم للتطبيق وهر java.ہ LoginWindow.java رخألاlو Logi‏ lلخاص‏ ڊlلFrame‏ 
في الأخير ستظهر لك شاشة مشابهه لهذه 
تأكد انك ضغطت على 101۸9۷1۸00۷.4۷2 في الأعلى وعلى ال في الأسفل . 


ğ; Oracle JDeveloper 10g - Araboracle.jws : tutorials.jpr 


| Sj Data Control Palette Hx 


contentPane <default> 
defaultCloseO,.. 2 
enabled True 


| enabled rue 
| font _| "Tahoma", 0, 11 
foreground I Color, black 
X glassPane <def ault> 
iconImage <def ault> 
JMenuBar <default> 
| layeredPane <default> 
layout null v 
أ‎ 
background 
LÊ] Constraints Hx 
v 
٠ 
| UIEditing 


هذه النافذة تعرض خصائص الكائن ر بنية 4 
background‏ مثل ا ومکانه و لو نهو ابعاد ه ۳ &J Loginwindow.java - Structure‏ | 


File Edit Search view Project Run Debug Yersioning Tools Window Help 

DEHA ° XOE RRM O O »ۍ#‎ BH BH BW ı1 m= B 
[ TÈ Applications - Navigator Px 
GE F9 ®- 

® Applications 

.-E Araboracle 


اختر هذا الملف والخاص 


E. tutorials ننافذة الد‎ 
Û--Ëğ) Application Sources خول‎ : 
E-{@ Miscellaneous Packages Frame 
٣ B, login.java أ‎ 
lB LoginWindow.jat 


HEK EERE 
Û mypackage1 

E) Imports 

EE] ta Login Window 

fp extends JFrame 

EŞ î Loginwindow(). 

E g jbInitû : void 


وهذا يعرض ال وعویھ1ا€ 
والول0ط)MN6‏ ( مبرمجي 


li connections ]| E] structure 


Component Palette‏ و 


شاشة الكائنات و 
lë} Browse...‏ 

ff Button Components 
F JCheckBox 
Ê ComboBox | 
JF JEditorPane | 

RE, JFormattedTextField ا‎ code] Pclass | ur 


this x: 24 y: -19 


في حالة عدم ظهور أيا من النوافذ وبالخصوص Component Palette si Property |speC0r‏ 
اذهب إلى قائمة ه۷ في الأعلى واختر اسم القائمة فستظهر لك حينها . 
اعرف أناسا كثيرين يقومون بمتابعة درس معين ويحاولون تطبيقه وعندما يواجههم اختلاف ولو بسيط بين الكتاب و 


بيئة العمل يتوقفون 


عن متابعة الدرس لذا ننبه انه من المستحيل أن تتطابق إعدادات الأجهزة وخصوصا أن الخبراء في مجال معين 


تکون لهم احتیاجات 


و إعدادات خاصة وهم يفترضونها في اكثر الأحيان لكن من الأجدر بك كمتعلم أن تبحث عن كيفية إظهار تلك 


الأداة أو هذه النافذة . 


سنقوم الآن بإضافة ماج1 و sلاع۴i ext‏ و Buttons‏ لهذا ال مص ها۴ الذي أنشأناه . 
اذهب إلى eا†ماa‏ ۴ Component‏ الموجودة في اسفل يسار الصفحة وتأكد أن وس6 هو المختار حاليا . 


Component Palette‏ ت 


Swing 

Iş Pointer 
ك‎ Browse... 
laf Button 


F JCheckBox 

JComboBox 

f7 3EditorPane 

RE, 3FormattedTextField ا=‎ 


من تلك القائمة ابحث عن هاطج ال وقم بالضغط عليه كما في الشاشة التالية وبعدها اضغط على ال "ع٣۴‏ 


الخاص بالتصميم 


Component Palette‏ ت 


Swing 


JComboBox 


f7 JEditorPane 


RB, JFormattedTextField 
(A) Label 
Ef] ist 


[#X JPasswordField 


ستكون الشاشة لديك كالأتي 
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e ا×اعاے‎ 
File Edit Search view Project Run Debug Yersioning Tools Window Help 
OREO PAN KOSE REN FS DOD ww» BB BEBE m 8B 
| ® Applications - Navigator e x<) |g BLoginWwindow.java] YLogin.java| îy Data Control Palette ES 
EEE 
Sr a = B= 2a A F mw k۳ & MM "M £ 
Applications 


21-EM Araboracle . E 
A-O tutorials لاطا‎ 
1-S Application Sources ee 
E1-fP Miscellaneous Packages rop As: 
BB, login.java 
3 LoginWindow.j 


| 


® iLabel1 OLabel) - Property Inspect  X 


- 
mLabel1 
= 


Lajas _ ef AAR Ea ¥ O 33 


|&J LoginWindow.java - structure _H X 


- a چ‎ alignmentx 0.0 
5 ® a] 8 E alignmentY 0.5 
& mypackage1 autoscrolls False 
FB Imports background E 212, 208, 200 
A-E îa Loginwindow __ border _ <default> 
tp extends Frame bounds 80, 55, 150, 30 
ER da LoginwindowO debugeraphic... NONE_OPTION 
E] & jbInitO : void disabledIcon 
@ ilabel1 : Label displayedMne... 
displayedMne... -1 ج‎ 
aetionMap 
kj constraints as 
[connections ]| E) structure | 


® component Palette E: 


3ComboBox 


دا 
F7 3EditorPane‏ 
RE, 3FormattedTextField 1‏ 
(A) Label‏ 
JlList‏ 
[FT 3PasswordField‏ 


E EEE EM mE 


this x: SO ¥: -17 | ur Editing 


سيكون هذا ال هاج[ كعنوان ترحيبي لهذا ال ه۴۲ فعلى سبيل المثال قد يحتوي جملة أهلا وسهلاً أو اسم 
البرنامج مثلاً 

يمكنك تغيير النص الموجود حاليا والذي هر ٥اطھ‏ از عن طریق نافذة c†orممsہ!| Property‏ ابحث عن 
الخاصية ٠×‏ واكتب النص الذي تریده أن يظهر كالتالي ولا تنسى أن تعيد تسمية من خلال الخاصية "2٣6‏ 


preferred5ize 28, 14 


taalTip Text 


verify InpUk,., 

verticalAlign,,. CENTER 

verticalText, ,, CENTER BD 
گا‎ 


Defines the single ling of kext this 


بعدها اضغط على ال "ه۴۲ في الوسط » سترى أن النص تغير ولكن قد لا يظهر بشكل كامل 

اضغط على ال هاطج] الذي وضعناه وقم بمحاولة تكبير حدوده عن طريق أركانه بواسطة الفأرة . 

يمكنك تكبير حجم الخط بعدها عن طريق الخاصية ٣ه‏ في نافذة o۲أعمءہ|‏ yاrمم۴Pro‏ » قم باختیار خطوط 
معروفة وافتراضية الوجود في الأجهزة مثل خط اهأاA‏ ور2ة ٣‏ هجا وغيرها إلا إذا كنت ستصدر تلك الخطوط 
مع برنامجك . 

كذلك حاول عمل محاذاة إلى اليمين وذلك عن طريق الخاصة horizontal Alignment‏ قم باکتشاف بقیة 
الخصائص بنفسك . 

بعد ذلك قم بإضافة مهال خاص باسم المستخدم وأخر خاص بكلمة المرور بنفس الطريقة 

وألان علينا إضافة مربع نص ۲٠×180×‏ لإدخال اسم المستخدم فيه بنفس الطريق السابقة الآن اضغط على 
١ا۴‏ exiهtل‏ وقم رسمه على ال "٥‏ ه۴۲ من النقطة اليسرى العلوية إلى النقطة اليمني السفلية لكي يتحدد لك 
حجمه وضعه تحت ال #اطه ال الخاص باسم المستخدم . 


Component Palette êa’ Cornponent Palette‏ 2گ 


Swing Swing 
E List 
[*X JPasswordField 


1 Fm JProgressBar 
abl JTextFie! 
[7] 1TextPane 

ECE J5crollBar 


= J1ToggleButton 2 
] J5eparator 


A} Clidmw 


& JRadioButton 


r3 JTree 


وأما مربع النص الخاص بكلمة المرور والذي يختلف عن سابقه بأنه لا يظهر كلمة المرور وإنما بدلا منها علامة * 


قم بحذف القيم الموجودة في خاصية ×ه] لإزالة ماهو موجود داخل مربع النص . 

وقم بتغيير اسم مربع النص وهو هنا عبارة عن 6زط0 وذلك بتغيير قيمة خاصية 4۳6م إلى 
userNameTextField‏ 

وكذلك بالنسبة لمربع النص الخاص بكلمة المرور قم بتغيير قيمة خاصية ١a٣‏ 


passwordField Jl! 


بقي في الأخير إضافة زر ١0]الاطل‏ لعملية الدخول و يتم اختياره من نفس المكان الذي سبق أن أخذنا منه مربع 
النص الخاص باسم المستخدم وكلمة المرور قم بتغيير خاصية ]× للد ۸٥]اںاطل‏ إلى كلمة "دخول" وكذلك قم 


بتغيير قيمة خاصية me‏ ھ^ إJJ” LoginButton‏ 


dî Component Palette 
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> Application Sources 
E-( Miscellaneous Packages 


| defaultcloseO... 2| 
enabled True 
font "Tahoma", O, 11 
foreground I Color. black 
glassPane <default> 
a LoginWîndow() 
û bînît : void 
g infoLabel : Label 
et ا ا‎ 


3 


No Constraints 


وسترى ما قام ۲هم‌ه‌اما هل بكتابته نيابة عنك عد إلى وضع التصميم عن طريق ضغط ال في الأسفل . 


بقي شيء صغير وهو إضافة ماطهال أخر في اسفل ال "٥‏ ه٣]‏ لإظهار نتيجة الدخول › قم بإضافته بنفسك 


وقم بتسميته ب اعطاج اهام ولا تنسى بمسح أي قيمة موجود في خاصية ×6 


تأكد من أسماء الكائنات ويجب مراعاة حالة الأحرف من حيث كونها كبيرة أو صغيرة فجافا حساسة لها جدا . 


حان الآن بأن نقوم ببعض التطوير بدلا من الرسم . 


سنقوم الآن بإضافة حدث ( E۷٣6۲‏ ) عند الضغط على الزر الخاص بالدخول 
قم بالنقر على زر دخول مرتين متتالين ستجد أن مهام هلل قام بإضافة هذا الكود 


private void LoginButton_actionPerformed(ActionEvent e) 
{ 
} 


قم بإضافة هذا الكود بين القوسين ليصبح في الأخير كالتالي 
private void LoginButton_actionPerformed (Action Evente)‏ 
{ 
String username = userNameTextField.getText();‏ 
char[] password = passwordField.getPassword();‏ 
String pw = new Sitring(password);‏ 


if(username.trim().length() == 0 || pw.trim().length() == 0) 


infoLabel.setText("Login Message: username and password should not be 
empty"); 


1 


else 


infoLabel.setText("Login Message: customer is logging in ..."); 
if (username.equals("a") && pw.equals("b")) 


infoLabel.setText("Login Message: customer has logged in"); 


} 


else 


infoLabel.setText("Login Message: invalid username or password, login 
failed"); 


1 


الآن قم بتشغيل البرنامج 
وذلك عن طريق الضغط على ۴11 


قد تظهر لك رسالة تسألك عن الملف الرئيسي لتطبيقك اختر ۷4ھ ز. وہ ا ثم OK‏ 


والآن هذا هو الكود الکامJ‏ للف Login Window.java‏ 


package mypackage1 ; 

import javax.swing.JFrame; 

import java.awt.Dimension; 

import javax.swing.JLabel; 

import java.awt.Rectangle; 

import java.awt.Font; 

import javax.swing.SwingConstants; 
import javax.swing.JTextField; 
import javax.swing.JPasswordField; 
import javax.swing.JButton; 

import java.awt.event.ActionListener; 
import java.awt.event.Action Event; 


public class LoginWindow extends JFrame 
{ 
private JLabel jlLabel1 = new JLabel(); 
private JLabel jlLabel2 = new JLabel(); 
private JLabel jLabel3 = new JLabel(); 
private JTextField userNameTextField = new JTextField(); 
private JPasswordField passwordField = new JPasswordField(); 
private JButton LoginButton = new JButton(); 
private JLabel infoLabel = new JLabel(); 


public LoginWindow() 


{ 
try 
{ 
jbInit); 
1 


catch(Exception e) 


{ 


e.printStackTrace(); 
1 


1 


private void jbInit() throws Exception 
{ 
this.getContentPane().setLayout(null); 
this.setSize(new Dimension(400, 307)); 
this.seT it|e)"لوخدلا ;("شاشة‎ 
زاهط٥ا1.ءع١‎ ٠×)" ;("جامعة الؤرقاء الأهلية‎ 
jLabel1.setBounds(new Rectangle(15, 5, 370, 55)); 
jLabel1.setFont(new Font("alkesaa - nawal", 0, 30)); 
jLabel1.setHorizontalAlignment(SwingConstants.RIGHT); 
jl1 abe|2.s٥11 ٥ "اسم المستخدم")×‎ (; 
jLabel2.setBounds(new Rectangle(1 55, 60, 220, 25)); 
jLabel2.setHorizontalAlignment(SwingConstants.RIGHT); 
از‎ aط٥13.ء٥١‎ ٥×)" ;("كلمة المرور‎ 
jLabel3.setBounds(new Rectangle(155, 115, 225, 30)); 
jLabel3.setHorizontalAlignment(SwingConstants.RIGHT); 
userNameTextField.setBounds(new Rectangle(240, 85, 145, 25)); 
passwordField.setBounds(new Rectangle(240, 145, 145, 25)); 
LoginButton.set1 ex("Jgخد");‎ 
LoginButton.setBounds(new Rectangle(295, 190, 85, 30)); 
LoginButton.addActionListener(new ActionListener() 
{ 
public void actionPerformed(Action Event e) 
{ 
LoginButton_actionPerformed(e); 
} 
J 

infoLabel.setText("jLabel4"); 
infoLabel.setBounds(new Rectangle(10, 235, 380, 25)); 
this.getContentPane().add(infoLabel, null); 


( 
this.getContentPane().add(LoginButton, null); 
this.getContentPane().add(passwordField, null); 
this.getContentPane().add(userNameTextField, null); 
this.getContentPane().add(jLabel3, null); 
this.getContentPane().add(jLabel2, null); 
this.getContentPane().add(jLabel1, null); 


} 


private void LoginButton_actionPerformed(ActionEvent e) 


{ 


String username = userNameTextField.getText(); 
char[] password = passwordField.getPassword(); 
String pw = new String(password); 


if(username.trim().length() == 0 || pw.trim().length() == 0) 


{ 


infoLabel.setText("Login Message: username and password should not be 
empty"); 


} 


else 
{ 


infoLabel.setText("Login Message: customer is logging in ..."); 
if (username.equals("a") && pw.equals("b")) 


{ 


infoLabel.setText("Login Message: customer has logged in"); 


1 


else 


infoLabel.setText("Login Message: invalid username or password, login 
failed"); 


1 
1 


وتمنياتي للجميع بالتوفيق 
أخوكم / أشرف الأشقر 


